<template>
	<view class="main-wrapper" :style="{'padding-top':statusBarHeight+'px'}">
		<view class="head-bg">
			<image src="/package_coupon/static/image/1.2.png" mode="aspectFill"></image>
		</view>
		<view class="head-wrapper">
			<view class="top" :style="{'height':navBarHeight+'px'}">
				<view class="img-wrapper" @click="handleBack">
					<image src="/package_coupon/static/image/1.3.png" mode="aspectFill" ></image>
				</view>
			</view>
			<view class="logo">
				<image src="/package_coupon/static/image/1.4.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="mid-wrapper">
			<view class="top"> </view>
			<view class="main">
				<view class="item">
					<view class="t1">
						荣耀贵阳·智慧高新
					</view>
					<view class="t2">自助洗车城市形象店</view>
					<view class="timg">
						<image src="/package_coupon/static/image/1.5.png" mode="aspectFill" @click="navApp"></image>
					</view>
					<view class="sld">
						<scroll-view class="box" scroll-x="true">
							<view class="b1" @click="onClick(1)">
								<image src="/package_coupon/static/image/1.6.png" mode="aspectFill"></image>
								<view class="b1m">
									<view class="t">
										<view class="num"><text class="n">￥</text>9.9</view>
										<view class="ti">
											<view class="ti1">洗车优惠券</view>
											<view class="ti2">登录后领取</view>
										</view>
									</view>
									<view class="bt">
										<view :class="isDisable1?'btn dis':'btn'">去领取</view>
									</view>
								</view>
							</view>
							<view class="b1" @click="onClick(2)">
								<image src="/package_coupon/static/image/1.6.png" mode="aspectFill"></image>
								<view class="b1m">
									<view class="t">
										<view class="num"><text class="n">￥</text>9.9</view>
										<view class="ti">
											<view class="ti1">洗车优惠券</view>
											<view class="ti2">加入企业后</view>
										</view>
									</view>
									<view class="bt">
										<view :class="isDisable2?'btn dis':'btn'">去领取</view>
									</view>
								</view>
							</view>
							<!-- <view class="b1" @click="onClick(1)">
								<image src="/package_coupon/static/image/1.6.png" mode="aspectFill"></image>
								<view class="b1m">
									<view class="t">
										<view class="num"><text class="n">￥</text>9.9</view>
										<view class="ti">
											<view class="ti1">洗车优惠券</view>
											<view class="ti2">无门槛使用</view>
										</view>
									</view>
									<view class="bt">
										<view class="btn">立即领取</view>
									</view>
								</view>
							</view> -->
						</scroll-view>
					</view>
				</view>
				<view class="intro">
					<view class="brief">
						<view class="txt">
							1.本券9.9元可抵每次洗车最高18.8元消费金额、单次洗车时间限40分钟,当实际消费金额达到18.8元或者时间达到40分钟,洗车机将自动停机。
						</view>
						<view class="txt">
							2.点击“加入企业”按钮，进入加入企业界面。输入您的企业名称并进行搜索，找到您的企业后点击“加入企业”，若您是企业的相关负责人，可以点击“申请管理员”进行操作。完成企业加入后，返回页面，即可点击领取洗车券。
						</view>
						<view class="txt">
							3.加入企业后，您将能够享受平台提供的更多优惠。具体的优惠规则，可以在“我的”界面点击“优惠规则”查看详细信息。
						</view>
					</view>
					<view class="head-bg">
						<view class="hb">
							<image src="/package_coupon/static/image/1.7.png" mode="aspectFill"></image>
							<view class="title">领取洗车券说明</view>
						</view>
					</view>
				</view>
				<view class="foot"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import loginDialog from "@/components/login/index.vue"
import { customNav } from "@/utils/customNav"
import { onShow } from '@dcloudio/uni-app';
import { getUserInfoApi } from "@/api/user";

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// 胶囊位置信息
const rect = uni.getMenuButtonBoundingClientRect();
// 导航栏高度
const navBarHeight = (rect.top - statusBarHeight) * 2 + rect.height;
const userLoginDialog = ref(false);
const userLoginInfo = ref('');
const userEnterpriseId = ref('');
const isDisable1 = ref(true)
const isDisable2 = ref(true)

onShow(async () => {

	uni.setStorageSync("is_view_activity", '1')
	userLoginInfo.value = uni.getStorageSync("token")
	if (userLoginInfo.value) {
		const res = await getUserInfoApi()
		if (res.code===200) {
			userEnterpriseId.value = res.data.enterpriseId
		}
	}
	if (userLoginInfo.value!=='' && userLoginInfo.value!==null) {
		isDisable1.value = false
	}
	if (userLoginInfo.value!=='' && userLoginInfo.value!==null && userEnterpriseId.value!=='' && userEnterpriseId.value!==null) {
		isDisable2.value = false
	}
	console.log('--- show coupon ---', isDisable1.value, isDisable2.value)
})

const navApp = () => {
	uni.navigateToMiniProgram({
		appId:'wx1896e306544e975f',
		path:'pages/home/index',
		success() {
			console.log('success')
		},
		fail() {
			console.log('fail')
		}
	})
}

const onClick = (n) => {
	if (n===1 && !checkLogin()) {
		return false
	}
	if (n===2 && !checkJoin()) {
		return false
	}
	const path = n===1 ? 'pages/directAccessPage/getCoupon?couponId=1778432436417544&type=9':'pages/directAccessPage/getCoupon?couponId=1778606714431961&type=9'
	uni.navigateToMiniProgram({
		appId:'wx1896e306544e975f',
		path: path,
		success() {
			console.log('success')
		},
		fail() {
			console.log('fail')
		}
	})
}
const checkLogin = () => {
	if (isDisable1.value) {
		uni.showModal({
			title: '登录后领取',
			content: '登录后继续领券，是否登录？',
			success: function (res) {
				if (res.confirm) {
					customNav("/package_login/pages/login/login")
				} else if (res.cancel) {
					console.log('---cancel login---')
				}
			}
		})
		return false
	}
	return true
}
const checkJoin = () => {
	if (isDisable2.value) {
		uni.showModal({
			title: '加入企业后领取',
			content: '加入企业后继续领券，是否加入？',
			success: function (res) {
				if (res.confirm) {
					customNav("/package_user/pages/user/Joining-enterprise")
				} else if (res.cancel) {
					console.log('---cancel join---')
				}
			}
		})
		return false
	}
	return true
}

const handleBack = () => {
	uni.navigateBack()
}

</script>
<style>
page {
	background-color: #9CCDFF;
}
</style>
<style lang="less" scoped>

.main-wrapper {
	// background-image: url('../../static/image/1.2.png');
	// background-size: 750rpx 630rpx;
	position: relative;
	.head-bg {
		z-index: -1;
		position: absolute;
		top: 0;
		image {
			width: 750rpx;
			height: 630rpx;
		}
	}
	.head-wrapper {
		.top {
			display: flex;
			align-items: center;
			.img-wrapper {
				width: 36rpx;
				height: 36rpx;
				margin-left: 34rpx;
				image {
					width: 18rpx;
					height: 36rpx;
				}
			}

		}
		.logo {
			height: 364rpx;
			image {
				margin-left: 45rpx;
				width: 294rpx;
				height: 120rpx;
			}
		}
	}
	.mid-wrapper {
		.top {
			height: 80rpx;
		}
		.main {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.item {
				width: 686rpx;
				background-color: #fff;
				border-radius: 16rpx;
				.t1 {
					margin-top: 24rpx;
					text-align: center;
					color: #333333;
					font-size: 40rpx;
					font-weight: bold;
				}
				.t2 {
					font-size: 30rpx;
					color: #333333;
					text-align: center;
				}
				.timg {
					padding-top: 26rpx;
					text-align: center;
					image {
						width: 640rpx;
						height: 222rpx;
					}
				}
				.sld {
					margin-top: 36rpx;
					.box {
						width: 662rpx;
						height: 240rpx;
						white-space: nowrap;
						margin-left: 24rpx;
						.b1 {
							position: relative;
							margin-right: 25rpx;
							display: inline-block;
							width: 292rpx;
							height: 196rpx;
							image {
								width: 100%;
								height: 100%;
							}
							.b1m {

								width: 292rpx;
								height: 196rpx;
								position: absolute;
								top: 0;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.t {
									height: 116rpx;
									display: flex;
									align-items: center;
									.num {
										margin-left: 10rpx;
										margin-right: 22rpx;
										color: #FC4810;
										font-size: 42rpx;
										font-weight: bold;
										.n {
											font-size: 28rpx;
											font-weight: normal;
										}
									}
									.ti {
										.ti1 {
											color: #9B3314;
											font-size: 28rpx;
											font-weight: bold;
										}
										.ti2 {
											color: #9B3314;
											font-size: 28rpx;
										}
									}
								}
								.bt {
									height: 80rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									.btn {
										width: 170rpx;
										height: 46rpx;
										background-color: #FFE4C0;
										color: #9B3314;
										font-size: 28rpx;
										text-align: center;
										line-height: 46rpx;
										border-radius: 24rpx;
										&.dis {
											background-color: #F7F7F7;
											color: #666666;
										}
									}
								}
							}
						}
					}
				}
			}
			.intro {
				position: relative;
				width: 686rpx;
				background-color: #E2F1FF;
				border-radius: 16rpx;
				margin-top: 64rpx;
				.brief {
					padding: 88rpx 24rpx 8rpx 24rpx;
					.txt {
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 16rpx;
					}
				}
				.head-bg {
					z-index: 2;
					position: absolute;
					top: -8rpx;
					left:214rpx;
					width: 258rpx;
					height: 68rpx;
					.hb {
						position: relative;
						width: 258rpx;
						height: 68rpx;
						image {
							width: 100%;
							height: 100%;
						}
						.title {
							position: absolute;
							top: 14rpx;
							left: 32rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;;
						}
					}

				}
			}
			.foot {
				height: 48rpx;
			}
		}
	}
}
</style>
